<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<template id="hello">
    <h1>{{msg}} {{user}}</h1>
</template>

<template id="form">
    <div>
        <label for="name">What's your name?</label>
        <input v-bind:value="value" type="text" id="name" v-on:input="onInput">
    </div>
</template>

<template id="greetings">
    <div>
        <form-component v-model="user"></form-component>
        <hello-component :user="user"></hello-component>
    </div>
</template>

<div id="app">
    <greetings-component></greetings-component>
</div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    // Vue.component('form-component', {
    //     template:'#form',
    //     props:['user']
    // });
    Vue.config.devtools = true;

    Vue.component('form-component', {
        template:'#form',
        props:['value'],
        methods:{
            onInput:function (event) {
                this.$emit('input',event.target.value)
            }
        }
    });

    Vue.component('hello-component', {
        template: '#hello',
        data: function () {
            return {
                msg: 'Hello'
            }
        },
        props:['user']
    });

    Vue.component('greetings-component', {
        template:'#greetings',
        data:function () {
            return {
                user:'your name'
            }
        }
    });

    new Vue({
        el: '#app',

    });

</script>
</body>
</html>